<template>
	<scroll-view bindrefresh="onRefresh">
		<view>
			<uni-notice-bar scrollable show-get-more show-icon more-text="查看更多" :text="'求购信息：' + text"
				@getmore="getMore" />
			<uni-search-bar placeholder="物品名称" bgColor="#EEEEEE" @confirm="search" />
			<uni-grid :column="3" :show-border="false" :square="false">
				<uni-grid-item style="" v-for="(item ,index) in classifiedList" :index="index" :key="index">
					<view class="grid-item-box" @click="goToClassifiedListInfo(item.title)">
						<image class="image" :src="imgBaseUrl + item.imgSrc" mode="aspectFill" />
						<text class="text">{{item.title}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>

			<div>
				<itemBar :usedGoodsList="usedGoodsInfos" url="../../packagesHome/itemDetails">
				</itemBar>
			</div>
		</view>
	</scroll-view>
</template>

<script>
	import {
		mapActions,
		mapMutations,
		mapState
	} from 'vuex'
	import itemBar from "../../components/itemBar";
	import baseUrl from '../../publicData/baseUrl.js'
	export default {
		data() {
			return {
				askUsedGoodsInfos: [{
						askUsedGoodsInfo: '大二上软件工程全套书'
					},
					{
						askUsedGoodsInfo: '有没有出售吉他的'
					},
					{
						askUsedGoodsInfo: '想要一个键盘'
					}
				],
				text: '',
				classifiedList: [],
				imgBaseUrl: baseUrl.imgBaseUrl,
				size: 1, // 懒加载页码
			}
		},

		computed: {
			...mapState('publicModule', ["token", "sccountNumber"]),
			...mapState('usedGoodsModule', ["usedGoodsInfos"])
		},

		onLoad() {
			
			uni.getLocation({
				type: 'wgs84',
				success: function (res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
			
			const that = this
			
			console.log('onLoad')
			
			// 获取 token 
			that.setToken()
			
			// 获取分类列表数据
			this.getClassifiedList()

			// 更换求购通知信息的定时器
			for (let i = 0; i < that.askUsedGoodsInfos.length; i++) {
				setTimeout(() => {
					that.text = that.askUsedGoodsInfos[i].askUsedGoodsInfo
				}, 10000 * i)
			}

			// 获取用户信息
			setTimeout(() => {
				that.getUserInfo({
					sccountNumber: that.sccountNumber,
					token: that.token
				})
			}, 10)

			// 分页获取所有二手物品信息
			setTimeout(() => {
				that.getUsedGoodsInfos({
					size: that.size,
					token: that.token
				})
			}, 10)


		},

		// 下拉刷新周期函数
		onPullDownRefresh() {
			const that = this
			that.size = 1

			// 刷新分类列表数据
			this.getClassifiedList()

			// 刷新所有二手物品信息
			setTimeout(() => {
				this.getUsedGoodsInfos({
					size: that.size,
					token: this.token
				})
			}, 10)
			
			// 重新获取用户的信息
			that.getUserInfo({
				sccountNumber: that.sccountNumber,
				token: that.token
			})

			// 停止并隐藏下拉刷新的loading组件
			uni.stopPullDownRefresh()
		},

		// 上拉触底
		onReachBottom() {
			const that = this
			
			this.size++;
			// 分页获取所有二手物品信息
			setTimeout(() => {
				that.getUsedGoodsInfos({
					size: that.size,
					token: that.token
				})
			}, 10)
		},

		methods: {
			// 引入 userModule 中的 actions 方法
			...mapActions('userModule', ["getUserInfo"]),

			// 引入 publicModule 中的 actions 方法
			...mapMutations('publicModule', ["setToken"]),

			// 引入 publicModule 中的 actions 方法
			...mapActions('usedGoodsModule', ["getUsedGoodsInfos"]),

			// 获取分类列表数据
			getClassifiedList() {
				uni.request({
					url: baseUrl.host + '/api/getClassifiedList', //仅为示例，并非真实接口地址。
					success: (res) => {
						this.classifiedList = res.data.classifiedList
					}
				});
			},

			// 去向分类页面
			goToClassifiedListInfo(classificationTitle) {
				uni.navigateTo({
					url: '../../packagesHome/classificationList?classificationTitle=' +
						classificationTitle,
				})
			},

			// 搜索
			search(res) {
				console.log(res.value)
			},

			// 点击查看更多
			getMore() {
				uni.navigateTo({
					url: '../../packagesHome/askSecondhand'
				})
			}
		},

		components: {
			itemBar
		},

	}
</script>

<style scoped>
	.image {
		width: 35px;
		height: 35px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>